<template>
  <div id="demo"></div>
</template>

<script setup>
import * as d3 from 'd3'
import { onMounted } from 'vue'
onMounted(() => {
  drawScal()
  drawDotted()
  drawBar()
  drawCircle()
  drawBar2()

})
function drawBar() {
  const dataset = [5, 10, 15, 20, 25]
  d3.select("#demo").selectAll("span")
    .data(dataset)
    .enter()
    .append('span')
    .text(function (d) { return d })
    .style('padding', '5px')
    .style('color', function (d) {
      if (d > 15) {
        return 'red'
      } else {
        return 'blue'
      }
    })

  const barData = [25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 3, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10, 24, 18, 25, 9, 3];
  d3.select('#demo').selectAll('div')
    .data(barData).enter()
    .append('div')
    .attr('class', 'bar')
    .style('height', function (d) { return d * 1.8 + 'px' })

}

function drawCircle() {
  const w = 800, h = 120
  var circleSvg = d3.select('#demo')
    .append('svg')
    .attr('class', 'svg')
    .attr('width', w)
    .attr('height', h)

  var circleData = [5, 8, 12, 10, 15, 18, 25, 26, 30, 24, 20, 10, 8]
  var circles = circleSvg.selectAll('circle')
    .data(circleData)
    .enter()
    .append('circle')

  circles.attr('cx', function (d, i) { return (i * 60) + 25 })
    .attr('cy', h / 2)
    .attr('r', function (d) { return d })
    .attr('fill', "rgba( 255, 18, 88, 0.5)")
    .attr('stroke', "rgba(188, 48, 68, 0.2")
    .attr('stroke-width', function (d) { return d / 2 })

}

function drawBar2() {
  const barData = [25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 3, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10, 24, 18, 25, 9, 3];
  var w1 = 900, h1 = 160
  var barSvg = d3.select('#demo')
    .append('svg')
    .attr('class', 'svg')
    .attr('width', w1)
    .attr('height', h1)
  barSvg.append('g').selectAll('rect')
    .data(barData)
    .enter()
    .append('rect')
    .attr('x', function (d, i) {
      return i * (w1 / barData.length) + 15
    })
    .attr('y', function (d) { return h1 - d * 3 - 30 })
    .attr('width', function (d, i) { return w1 / barData.length - 15 })
    .attr('height', function (d, i) { return d * 3 })
    .attr('fill', function (d) { return `rgba(160, 0, ${d * 6}, 0.5)` })

  barSvg.append('g').selectAll('text')
    .data(barData).enter().append('text')
    .text(function (d) { return d })
    .attr('x', function (d, i) { return i * (w1 / barData.length) + 22 })
    .attr('y', function (d) { return h1 - 10 })
    .attr('fill', function (d) { return `rgba(160, 0, ${d * 6}, 0.5)` })
    .attr('text-anchor', 'middle')
    .style('font-size', '12px')
    .style('font-weight', 'bold')

  barSvg.append('g').append('text').text('条形图')
    .attr('x', function (d, i) { return w1 / 2 - 50 })
    .attr('y', 30)
    .attr('class', 'title')

}

function drawDotted() {
  var w = 800, h = 160
  var dataset = [
    [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150]
  ];
  var svg = d3.select('#demo').append('svg').attr('class', 'svg').attr('width', w).attr('height', h)
  svg.selectAll('circle').data(dataset).enter().append('circle')
    .attr('cx', function (d) { return d[0] * 1.5 + 20 })
    .attr('cy', function (d) { return d[1] + 30 })
    .attr('r', function (d) { return Math.sqrt(h - d[1]) })
    .attr('fill', function () { return "rgba(140,20,60,0.5)" })

  svg.selectAll('text').data(dataset).enter().append('text')
    .text(function (d) { return d[0] + ',' + d[1] })
    .attr('x', function (d) { return d[0] * 1.5 })
    .attr('y', function (d) { return d[1] + 50 })
    .attr('fill', function () { return "rgba(120,120,120,0.6)" })
  svg.append('g').append('text').text('散点图')
    .attr('x', function (d, i) { return w / 2 - 50 })
    .attr('y', 20)
    .attr('class', 'title')

}

// 比例尺 数轴
function drawScal() {
  const w = 800, h = 320
  const svg = d3.select('#demo').append('svg').attr('class', 'svg').attr('width', w).attr('height', h)

  var dataset = [
    [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150], [700, 120]
  ];
  var xScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function (d) { return d[0] })])
    .range([60, w - 60])
    .nice()
  var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function (d) { return d[1] })])
    .range([20, h - 80])
    .nice()
  var rScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function (d) { return d[1] })])
    .range([5, 20])

  var Axis = d3.axisBottom().scale(xScale).ticks(10)
    .tickFormat(d3.format("100" + 'x'))

  var AxisY = d3.axisLeft().scale(yScale).ticks(5)

  svg.append('g')
    .attr('class', 'axis')
    .attr("transform", "translate(0," + (h - 60) + ")")
    .call(Axis)

  svg.append('g')
    .attr('class', 'axis')
    .attr("transform", "translate(60, 36)")
    .call(AxisY)

  svg.selectAll('circle').data(dataset).enter().append('circle')
    .attr('cx', function (d) { return xScale(d[0]) })
    .attr('cy', function (d) { return h - yScale(d[1]) - 30 })
    .attr('r', function (d) { return rScale(d[1]) })
    .attr('fill', 'rgba(140,20,60,0.5)')

  svg.selectAll('text').data(dataset).enter().append('text')
    .text(function (d) { return d[0] + ',' + d[1] })
    .attr('x', function (d) { return xScale(d[0]); })
    .attr('y', function (d) { return h - yScale(d[1]) - 30; })
    .attr('fill', function () { return "rgba(120,120,120,0.6)" })

  svg.append('text').text('比例尺,点击有惊喜')
    .attr('x', function (d, i) { return w / 2 - 50 })
    .attr('y', 20)
    .attr('class', 'title')

  let flag = true

  // 触发事件
  d3.selectAll('circle').on('click', function (e) {
    console.log(e.target['__data__'], 666)
    if (flag) {
      flag = false
      // 更新数据
      var dataset = [
        [5, 20], [480, 90], [250, 50], [85, 21], [220, 88], [600, 150], [475, 44], [25, 67], [120, 33], [300, 95],
        [410, 12], [170, 88], [6, 95], [80, 12]
      ];
      svg.selectAll('circle').data(dataset)
        .transition()
        .duration(1500)
        .attr('cx', function (d) { return xScale(d[0]) })
        .attr('cy', function (d) { return h - yScale(d[1]) - 30 })
        .attr('r', function (d) { return rScale(d[1]) })
        .attr('fill', 'rgba(60,20,60,0.5)')
    } else {
      flag = true
      var dataset = [
        [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
        [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150], [700, 120]
      ];
      svg.selectAll('circle').data(dataset)
        .transition()
        .duration(3000)
        .attr('cx', function (d) { return xScale(d[0]) })
        .attr('cy', function (d) { return h - yScale(d[1]) - 30 })
        .attr('r', function (d) { return rScale(d[1]) })
        .attr('fill', 'rgba(180,20,60,0.9)')
    }
  })
}

</script>

<style lang="less">
.bar {
  display: inline-block;
  width: 12px;
  height: 75px;
  background-color: orange;
  margin: 0 3px;
}
.svg {
  margin: 50px auto;
  border: #dedede 1px solid;
  display: block;
  border-radius: 10px;
  padding: 10px;
}
.title {
  font-weight: bold;
  font-size: 18px;  
}
.axis {
  path,
  line {
    fill: none;
    stroke: #dedede;
    shape-rendering: crispEdges;
  }
  text {
    font-family: sans-serif;
    font-size: 11px;
  }
}
circle {
  transition: all 0.3s;
 &:hover {
    fill: pink;
 }
}
</style> 